<template>
	<div class="system-user-container">
		<el-card shadow="hover" class="mt5">
			<div class="flex-ajb mb10">
				<div><el-button type="success" icon="el-icon-plus" @click="addInfo">新增顶级菜单</el-button></div>
				<div>
					<el-select v-model="filtering.menuStatusId" placeholder="选择菜单状态" @change="initTableData()">
						<el-option v-for="item in filtering.menuStatus" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
			</div>
			<el-table
				v-loading="tableData.loading"
				:data="tableData.data"
				row-key="id"
				:tree-props="{ children: 'list' }"
				stripe
				highlight-current-row
				:header-cell-style="{ color: '#7f8da6', backgroundColor: '#F5F6F8' }"
			>
				<el-table-column prop="mOrder" label="菜单序号" width="70" fixed="left" type="" />
				<el-table-column prop="name" label="菜单名称" min-width="130">
					<template #default="scope">
						<el-button type="text" @click="showInfo(scope.row)">{{scope.row.name}}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="icon" label="菜单图标" min-width="150" />
				<el-table-column prop="url" label="菜单地址" min-width="180" />
				<el-table-column prop="state" label="菜单状态" min-width="80">
					<template #default="scope">
						<span>{{ filterState(scope.row.state) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="tag" label="操作" fixed="right" width="230">
					<template #default="scope">
						<div>
							<el-button type="text" @click="addSameInfo(scope.row)">新增同级</el-button>
							<el-button type="text" @click="addSonInfo(scope.row)">新增子级</el-button>
							<el-button type="text" @click="editInfo(scope.row)">编辑</el-button>
							<el-button type="text" v-if="scope.row.list.length === 0" @click="delInfo(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<operationMenu ref="operationMenuRef" :content-info="selectRow" :option="option" @isOk="initTableData" />
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted } from 'vue'
import operationMenu from './component/operationMenu.vue'
import { formatDate } from '/@/utils/formatTime'
import { menuStatus } from '/@/dictionaries/menu'
import { statusFilter, verifyNumberComma } from '/@/utils/toolsValidate'
import { ElMessageBox, ElMessage } from 'element-plus'
import { defaultMenuData, getMenu, delSysPermission } from '/@/api/menu'

export default {
	name: 'agent',
	components: { operationMenu },
	setup() {
		const refs: any = reactive({
			operationMenuRef: null
		})

		const state: any = reactive({
			filtering: {
				menuStatusId: 1,
				menuStatus: menuStatus
			},
			tableData: {
				data: [],
				loading: false
			},
			selectRow: {},
			option: {
				type: 'add',
				title: '新增'
			}
		})
		// 初始化表格数据
		const initTableData = () => {
			state.tableData.loading = true

			const params = {
				state: state.filtering.menuStatusId
			}

			getMenu(params)
				.then(res => {
					const { datas } = res

					state.tableData.data = datas.brand
				})
				.finally(() => {
					state.tableData.loading = false
				})
		}
		// 添加顶级
		const addInfo = () => {
			state.selectRow = { ...defaultMenuData }
			state.option.type = 'add'
			state.option.title = '新增顶级菜单'
			refs.operationMenuRef.openDialog()
		}
		// 添加同级
		const addSameInfo = row => {
			state.selectRow = { ...defaultMenuData }
			state.selectRow.pId = row.pId
			state.option.type = 'add2'
			state.option.title = '新增同级菜单'
			refs.operationMenuRef.openDialog()
		}
		// 添加子级
		const addSonInfo = row => {
			state.selectRow = { ...defaultMenuData }
			state.selectRow.pId = row.id
			state.option.type = 'add3'
			state.option.title = '新增子级菜单'
			refs.operationMenuRef.openDialog()
		}
		// 查看详情
		const showInfo = row => {
			state.selectRow = { ...row }
			state.option.type = 'show'
			state.option.title = '查看详情'
			refs.operationMenuRef.openDialog()
		}
		// 编辑菜单
		const editInfo = row => {
			state.selectRow = { ...row }
			state.option.type = 'edit'
			state.option.title = '菜单设置'
			refs.operationMenuRef.openDialog()
		}
		const filterState = (val: Number) => {
			return statusFilter(val, menuStatus)
		}
		// 删除菜单
		const delInfo = (row: object) => {
			ElMessageBox.confirm('此操作将关闭该用户代理权限, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delSysPermission({ id: row.id }).then(() => {
					ElMessage.success('删除成功！')
					initTableData()
				})
			})
		}
		const formFind = () => {
			initTableData()
		}
		const formReset = () => {
			state.filtering.menuStatusId = ''
			initTableData()
		}
		// 页面加载时
		onMounted(() => {
			initTableData()
		})
		return {
			initTableData,
			addInfo,
			addSameInfo,
			addSonInfo,
			showInfo,
			editInfo,
			filterState,
			delInfo,
			formFind,
			formReset,
			...toRefs(state),
			...toRefs(refs)
		}
	}
}
</script>

<style scoped lang="scss"></style>
